<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<jsp version="2.0" xmlns:c="http://java.sun.com/jsp/jstl/core"
     xmlns:jsp="http://java.sun.com/JSP/Page"
     xmlns="http://www.w3.org/1999/xhtml" >
    <html>
    <head>

    </head>
    <body>
        <form method="post" action="registration" id="form" name="form" onsubmit="return check()">
            <p class="text">
                <label>Логин:</label>
                <input  type="text" name="user_login" value="" id="user_login" />
            </p>
            <p class="text">
                <label >Ваше имя:</label>
                <input  type="text" name="user_fname" value="" id="user_fname" />
            </p>
            <p class="text">
                <label>Телефон:</label>
                <input  type="text" name="user_tel" value="" id="user_tel" />
            </p>
            <p class="text">
                <label>Email:</label>
                <input  type="text" name="user_email" value="" id="user_email" />
            </p>
            <p class="password-field">
                <label>Пароль:</label>
                <input  type="password" name="password" value="" id="pasword" />
            </p>
            <p class="password-field">
                <label>Повторите пароль:</label>
                <input  type="password" name="password1" value="" id="pasword1" />
            </p>

            <p class="next">
                <input type="submit" id="next" value="Отправить" />
                <input type="reset" id="clear" value="Очистить" />
            </p>

        </form>
    <script  type="text/javascript">
        var rules = {
                    user_login:[/\S+/],
                    user_fname:[/\S+/],
                    user_tel:[/\S+/,/\d{6,11}/],
                    user_email:[/\S+/,/^[a-z0-9\._-]+@+[a-z0-9\._-]+\.+[a-z]{2,3}/],
                    password:[/\S+/],
                    password1:[/\S+/]

        };
        function check() {
            var c = document.forms.form.elements, a;
            p1 = form.elements.pasword.value.toString();
            p2 = form.elements.pasword1.value.toString();
            for (a in rules) for (var b = 0; b < rules[a].length; b++) if (!rules[a][b].test(c[a].value)) {
                checkLable(c[a], 5);
                return false
            }
            if (p1 != p2) {
                checkLable(c[a], 5);
                return false;
            }
            return true;
        };
        function checkLable(b, a) {
            b.style.backgroundColor = a % 2 ? "#f00" : "";
            a-- && window.setTimeout(function (c, d) {
                return function () {
                    checkLable(c, d)
                }
            }(b, a), 300)
        };
    </script>

    </body>
</html>
</jsp>